import React from 'react';
import ReactDOM from 'react-dom';
import * as Sys from '../sys';
import * as SysBom from '../sys.bom';

import { PageHeader } from '../components/page-header';
import { Content, PageTitle } from '../components/content';
import { PageFooter } from '../components/page-footer';
import { Button } from '../components/buttons';

export class App extends React.Component {
    private handleErrorClicked = () => {
        SysBom.jumpTo('error');
    };

    render(): JSX.Element {
        return <>
            <PageHeader current={90} />
            <Content>
                <PageTitle>Demo</PageTitle>
                <div className="ui segment">
                    <Button value="Handle error" icon="pills" onClick={this.handleErrorClicked} />
                </div>
            </Content>
            <PageFooter />
        </>
    }
};

Sys.ready(() => ReactDOM.render(<App />, document.getElementById('root')!));